<template>
	<view>
		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<!-- 密码访问 -->
		<block v-if="protected">
			<common-pass @passTap="emitPass" :isError="isError" :getPass="getPass" :public_name="wxSet.public_name"
				:public_key="detailData.public_key" :public_step="public_step"></common-pass>
		</block>

		<view class="index-ov" v-else>
			<!-- 标题 -->
			<view class="titel-h-w">
				<view class="titel-h">
					{{ detailData.title.rendered }}
				</view>
			</view>

			<!-- 正文内容 -->
			<view class="data-view">
				<mp-html :tag-style="tag_style" :content="detailData.content.rendered"
					:container-style="container_style" :copy-link="copyLink" selectable="true"> 内容疯狂加载ing...</mp-html>
			</view>

			<view v-if="wxSet.wx_video != ''" style="width: 94%;padding-left: 3%;margin-top: 50rpx;">
				<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
			</view>

			<!-- 猜你想搜 -->
			<block v-if="posTagsList != ''">
				<view class="titel-felx">
					<view class="time-img">
						<image class="fengrui-img" src="../../static/my/star.svg" mode=""></image>
					</view>
					<view class="titel-h-go">
						相关文章
					</view>
				</view>

				<!-- 列表 -->
				<view class="list-li" v-for="(item ,index) in posTagsList" :key="index" @click="posTap(item)">
					<view class="list-img">
						<image class="fengrui-img" :src="item.thumbnailurl" mode="aspectFill"></image>
					</view>
					<view class="list-li-left">
						<view class="list-li-left-h">
							{{ item.title.rendered }}
						</view>
						<view class="list-li-left-describe">
							<view class="">推选阅读</view>
						</view>
					</view>
				</view>
			</block>


			<!-- 支撑顶部高度 -->
			<view style="height: 140rpx;"></view>
			<!-- 文章列表没有数据 -->
			<view class="no-list-data" v-if="no_list_data">
				--我的底线就到这里了--
			</view>

			<!-- 提问转发 -->
			<view class="cove-bom">
				<view class="cover-list-view">
					<view class="cover-quest" @tap="tarBlack()">
						返回上级
					</view>

					<button class="cover-list-btn" open-type="contact" :send-message-title="detailData.title.rendered"
						:send-message-path="posUrl" show-message-card="true">
						<view class="cover-list-icon">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font">咨询客服</view>
					</button>

					<view v-if="detailData.fr_down_url != '' || detailData.fr_down_file != ''">
						<view class="cover-list-icon" @tap="downloadTap()">
							<image class="fengrui-img" src="../../static/data/down.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font">资源下载</view>
					</view>

					<button class="cover-list-btn" open-type="share">
						<view class="cover-list-icon" style="height: 58rpx;">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="cover-list-font">分享</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	import mpHtml from '@/components/mp-html/mp-html';
	let rewardedVideoAd = null;
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				// 全屏加载
				coverBulr: true,
				no_list_data: false,
				// 文章ID
				posdCenterID: '',
				// 页面路径
				posUrl: '',
				// 基本配置
				wxSet: [],
				launchScene: 0, //微信小程序场景值
				// 评论
				XuMessageList: [],
				// 文章详情
				detailData: [],
				// 页码
				page: 1,
				// 当前时间戳和
				postDaySum: 0,
				postAdKey: [],

				// 文本框解析
				tag_style: {
					h1: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h2: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h3: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h4: 'lborder-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				},
				container_style: 'font-size:15px;overflow-x: hidden;line-height:30px;letter-spacing:1px',
				copyLink: false,
				// 相关文章
				posTagsList: [],

				// 密码访问
				protected: true,
				isError: 'suss',
				getPass: '',
				public_step: false,
			}
		},
		// 分享好友配置
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res.target)
			}
			return {
				title: this.detailData.title.rendered,
				imageUrl: this.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			return {
				title: this.detailData.title.rendered,
				imageUrl: this.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 监听触底----上啦刷新
		onReachBottom() {
			this.page = this.page + 1;
		},
		onLoad(posID) {
			// 接受数据
			this.posdCenterID = posID.id;
			// 接受数据
			this.posUrl = 'pages/data/data?id=' + posID.id;

			// 获取当前时间戳
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
			const day = now.getDate();
			const postDaySum = year + month + day;
			this.postDaySum = postDaySum;

			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();
			}


			// 微信分享盆友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				// 文章数据
				this.posdData();
			},

			// 文章数据
			posdData() {
				API.getInfo([this.posdCenterID]).then((res) => {
					this.detailData = res.data;
					this.posTag = res.data.tags[0];
					this.protected = res.data.content.protected; //密码访问
					this.coverBulr = false;

					if (this.wxSet.public_step != "") { //判断教程
						this.public_step = true;
					}
					if (this.protected == false) { // 广告缓存判断
						this.infoAdJudge();
					}
					this.infoPassJudge(); // 密码缓存判断
					// 检测是否有标签和热门文章
					if (res.data.tags == '' || res.data.tags[0] == undefined) {
						// console.log('该文章没有设置标签，请注意wordpress后天文章标签设置')
						this.no_list_data = true;
					} else {
						this.tagList(res.data.tags[0]); // 热门文章
					};
					// console.log('文章详情', res.data)


				})
			},

			// 密码访问
			emitPass(pass) {
				API.getInfoPass(this.posdCenterID, pass).then((res) => {
					// console.log('文章密码详情', res.statusCode)
					if (res.statusCode != 200) {
						this.isError = 'err';
					} else {
						this.setPass(pass); //密码缓存
						this.detailData = res.data;
						this.posTag = res.data.tags[0];
						this.protected = false; //密码访问
						// 检测是否有标签和热门文章
						if (res.data.tags == '' || res.data.tags[0] == undefined) {
							// console.log('该文章没有设置标签，请注意wordpress后天文章标签设置')
							this.no_list_data = true;
						} else {
							this.tagList(res.data.tags[0]); // 热门文章
						};
						this.infoAdJudge(); // 广告缓存判断

					}
				})
			},

			// 广告缓存公告判断
			infoAdJudge() {
				// 获取激励视频缓存
				const postAdKey = uni.getStorageSync('post_adkey');
				if (this.wxSet.ad_time == '1') {
					// 查找缓存数据
					if (postAdKey) {
						const foundItem = postAdKey.find(item => item.id === this.posdCenterID)
						// console.log(foundItem,'查找缓存数据')
						if (foundItem) {
							if (foundItem.time != this.postDaySum) { // 缓存时间大于或不等于
								this.starpAd();
							} else {
								// 独立文章公告弹窗
								if (this.detailData.pos_notice != '') {
									uni.showModal({
										title: '公告',
										content: this.detailData.pos_notice,
									});
								}
							}
						} else {
							this.starpAd(); // 没有缓存 初始化广告
						}
					} else {
						this.starpAd(); // 没有缓存 初始化广告
					}
				} else {
					this.starpAd();
				}
			},

			// 密码缓存判断
			infoPassJudge() {
				// console.log(postDaySum, '获取当前时间戳');
				// 获取激励视频缓存
				const passKey = uni.getStorageSync('pass_adkey');
				// 查找缓存数据
				if (passKey) {
					const foundItem = passKey.find(item => item.id === this.posdCenterID)
					// console.log(foundItem,'查找缓存数据')
					if (foundItem) {
						if (foundItem.time == this.postDaySum) { // 缓存时间大于或等于
							// console.log(foundItem.pass,'缓存密码')
							this.getPass = foundItem.pass;
						}
					}
				}
			},

			// 初始化广告
			starpAd() {
				if (this.launchScene == 1154) {
				uni.showModal({
					content: "请前往小程序使用完整服务",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							this.starpAd()
						}
					}
				})
				return;
			}

			if (this.wxSet.wx_jili_video != '' && this.detailData.fr_videp_if == '1') {
				this.CreateAd();
				this.videoAD();
			}
		},

		// 热门文章
		tagList(posTag) {
			API.getTagsList([posTag]).then((res) => {
				this.posTagsList = res.data;
				// console.log('热门文章', res.data)
			})
		},

		// 提交问题
		questionsTap() {
			uni.navigateTo({
				url: '../questions/questions?id=' + this.posdCenterID,
			})
		},

		// 资源点击
		downloadTap() {
			uni.navigateTo({
				url: '../download/download?id=' + this.posdCenterID
			})
		},

		// 点击跳转
		posTap(e) {
			switch (e.pos_read) {
				case '':
					uni.navigateTo({
						url: '../data/data?id=' + e.id,
					})
					break;
				case '0':
					uni.navigateTo({
						url: '../data/data?id=' + e.id,
					})
					break;
				case '1':
					uni.navigateTo({
						url: '../weblist/weblist?aurl=' + e.account_url,
					});
					break;
				case '2':
					uni.navigateTo({
						url: '../download/download?id=' + e.id,
					});
					break;
				case '3':
					uni.openChannelsActivity({
						finderUserName: e.wxvideo_id,
						feedId: e.wxvideo_feedid,
						success: (res) => {},
						fail: (err) => {
							console.log(err)
						}
					})
					break;
				case '4':
					const aid = e.bz_video_av
					const timestamp = new Date().getTime()
					const path =
						`pages/video/video?__preload_=${timestamp*10+3}&__key_=${timestamp*10+4}&avid=${aid}`
					wx.navigateToMiniProgram({
						appId: 'wx7564fd5313d24844',
						path,
						success: res => {
							console.log('跳转成功')
						}
					})
					break;
			}
		},

		//初始化激励视频广告组件
		CreateAd() {
			// 关闭加载弹窗（即使请求失败也需要关闭，避免一直显示加载状态）
			if (this.wxSet.wx_jili_video != '') {
				if (wx.createRewardedVideoAd) {
					this.videoAd = wx.createRewardedVideoAd({
						adUnitId: this.wxSet.wx_jili_video
					})
					this.videoAd.onLoad(() => {})
					this.videoAd.onError((err) => {
						console.log(err)
						// 播放错误下发奖励
						wx.showToast({
							icon: 'none',
							title: "错误码：" + err.errCode
						})
					})
					this.videoAd.onClose((res) => {
						if (res && res.isEnded) {
							uni.showToast({
								icon: 'none',
								title: "感谢您的支持"
							})

							// 设置广告缓存
							if (this.wxSet.ad_time == '1') {
								this.setRead();
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "中途关闭广告"
							})
							this.tarBlack();
						}
					})
				}

			}
		},

		// 流量主视频弹窗
		videoAD() {
			// 显示加载弹窗
			uni.showModal({
				title: '温馨提示',
				content: '请您先观看激励视频广告阅读全文',
				success: (res) => {
					if (res.confirm) {
						// console.log('用户点击确定');
						this.getVideoAd();
						uni.showLoading({
							title: '广告初始化',
							mask: true
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 1500);
					} else if (res.cancel) {
						// console.log('用户点击取消');
						this.tarBlack();
					}
				}
			});
		},

		// 激励视频
		getVideoAd() {
			// 用户触发广告后，显示激励视频广
			if (this.videoAd) {
				this.videoAd.show().catch(() => {
					// 失败重试
					this.videoAd.load()
						.then(() => this.videoAd.show())
						.catch(err => {
							console.log('激励视频', err)
						})
				})
			}
		},

		// 设置广告缓存
		setRead() {
			var postAdKey = uni.getStorageSync('post_adkey');
			if (postAdKey == '') {
				var postAdKey = [];
			}
			// 检测事否存在ID
			var isItem = postAdKey.find(item => item.id === this.posdCenterID);
			// 如果有更新ID,若没有新增ID
			if (isItem) {
				const updateData = (id, newData) => {
					postAdKey = postAdKey.map(item => {
						if (item.id === id) {
							return {
								...item,
								...newData
							};
						}
						return item;
					});
				};
				updateData(this.posdCenterID, {
					time: this.postDaySum,
				});
			} else {
				var jlis = postAdKey.unshift({
					id: this.posdCenterID,
					time: this.postDaySum,
				})
			}
			uni.setStorageSync('post_adkey', postAdKey);
			// console.log(postAdKey)
		},

		// 设置密码缓存
		setPass(e) {
			var passKey = uni.getStorageSync('pass_adkey');
			if (passKey == '') {
				var passKey = [];
			}

			// 检测事否存在ID
			var isItem = passKey.find(item => item.id === this.posdCenterID);
			// 如果有更新ID,若没有新增ID
			if (isItem) {
				const updateData = (id, newData) => {
					passKey = passKey.map(item => {
						if (item.id === id) {
							return {
								...item,
								...newData
							};
						}
						return item;
					});
				};
				updateData(this.posdCenterID, {
					time: this.postDaySum,
				});
			} else {
				var jlis = passKey.unshift({
					id: this.posdCenterID,
					time: this.postDaySum,
					pass: e,
				})
			}
			uni.setStorageSync('pass_adkey', passKey);
			// console.log(passKey)
		},

		// 左上角返回按钮
		tarBlack: function() {
			// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
			var selPage = getCurrentPages();
			// console.log(selPage.length)
			if (selPage.length == 1) {
				uni.switchTab({
					url: "../index/index"
				})
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
	}
</script>

<style>
	/* 加载动画 */
	.data-login {
		height: 70rpx;
		width: 70rpx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.data-login-flex {
		position: fixed;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		z-index: 1029;
		background-color: #f7f7f7;
	}

	/* 提问转发 */
	.cover-list-icon {
		height: 64rpx;
		width: 64rpx;
		display: block;
		margin: auto;
	}

	.cover-list-btn {
		margin: 0rpx;
		padding: 0rpx;
		background-color: unset;
		line-height: unset;
	}

	.cover-list-font {
		color: #b2b2b2;
		font-size: 24rpx;
		text-align: center;
		/* margin-top: 16rpx; */
	}

	.cover-open-right-bot {
		width: 100%;
		height: 100%;
		transform: rotate(180deg);
	}

	.cover-open-right-up {
		width: 100%;
		height: 100%;
	}

	.cover-open-right {
		position: absolute;
		right: 44rpx;
		height: 32rpx;
		width: 32rpx;
	}

	.cover-quest {
		border-radius: 100rpx;
		height: 64rpx;
		line-height: 64rpx;
		width: 24%;
		background-color: #f3f3f3;
		color: #b7b7b7;
		font-size: 24rpx;
		padding-left: 40rpx;
	}

	.cover-list-view {
		margin-bottom: 28rpx;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
	}

	.cover-h-icon {
		height: 50rpx;
		width: 50rpx;
		overflow: hidden;
		margin-left: 28rpx;
		margin-right: 14rpx;
	}

	.cover-view-h {
		margin: 28rpx 28rpx 0rpx 28rpx;
		color: #FFFFFF;
		height: 80rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;

	}

	.cove-bom {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		z-index: 1025;
		background-color: #fff;
	}

	/* 问题列表 */
	.que-time {
		color: #D5D5D5;
		font-size: 20rpx;
		margin-top: 14rpx;
	}

	.que-wen {
		margin-top: 14rpx;
		color: #7c7c7c;
		font-size: 28rpx;
	}

	.que-name {
		font-size: 26rpx;
	}

	.que-text {
		color: #cecccc;
		margin-left: 10rpx;
	}

	.que-description {
		margin-left: 20rpx;
	}

	.que-user {
		height: 50rpx;
		width: 50rpx;
		border-radius: 100rpx;
		background-color: #00BFFF;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.que-user-d {
		background-color: #4c8cec !important;
	}

	.que-lisr-v {
		border-radius: 20rpx;
		margin: 30rpx;
		display: flex;
	}

	/* 评论 */
	.leaving-user-time {
		color: #D5D5D5;
		font-size: 20rpx;
	}

	.leaving-user-info {
		margin-left: 20rpx;
	}

	.leaving-user-img {
		background-color: #007AFF;
		border-radius: 10rpx;
		height: 80rpx;
		width: 80rpx;
		flex-shrink: 0;
	}

	.leaving-view {
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 30rpx;
		display: flex;
	}

	/* me-svg */
	.Vajra-list-font {
		color: #807C7C;
		font-size: 24rpx;
		text-align: center;
		margin-top: 16rpx;
	}

	.Vajra-list-img {
		height: 60rpx;
		width: 60rpx;
		overflow: hidden;
		margin: auto;
	}

	.me-sbg-btn {
		/* overflow-y: hidden; */
		justify-content: center;
		align-items: center;
	}

	.me-svg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0rpx 20rpx 0rpx;
		border-radius: 16rpx;
	}

	/* 资源 */
	.list-li-left-describe {
		margin: 30rpx 0rpx 10rpx 0rpx;
		font-size: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-li-tag {
		color: #D5D5D5;
		font-size: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 20rpx;
	}

	.list-img {
		height: 100rpx;
		width: 120rpx;
		border-radius: 14rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-view {
		margin: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10);
	}

	.list-li {
		display: flex;
		align-items: center;
		margin: 20rpx 0rpx;
	}

	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
		margin-top: 40rpx;
		font-size: 30rpx;
	}

	.no-img {
		border-radius: 20rpx;
		overflow: hidden;
		height: 700rpx;
		width: 500rpx;
	}

	.no-datalist {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30rpx 0px;
		color: #ADADAD;
	}

	/* 列表 */
	.list-li-left-describe {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #D5D5D5;
		font-size: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.list-li-left-h {
		font-size: 26rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-li-left {
		margin-left: 32rpx;
		flex-grow: 1;
		height: 116rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.list-img {
		height: 100rpx;
		width: 120rpx;
		border-radius: 14rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li {
		display: flex;
		margin: 20rpx 48rpx;
		align-items: center;
		border-radius: 20rpx;
	}

	.list-li-toew {
		display: flex;
		margin: 20rpx 0rpx;
		align-items: center;
		border-radius: 20rpx;
		justify-content: space-around;
	}

	.list-icon-list {
		text-align: center;
	}

	.list-icon-list-btn {
		text-align: center;
		margin: 0;
		background-color: unset;
		padding: 0;
	}

	.list-icon-list-img {
		height: 60rpx;
		width: 60rpx;
		overflow: hidden;

	}

	.list-icon-list-img-title {
		font-size: 22rpx;
		color: #b1b1b1;
		margin-top: 12rpx;
	}

	.list-li-toew-ma {
		margin: 40rpx 0rpx 20rpx 0rpx;
	}

	/* 标题 */
	.title-h-ad {
		height: 240rpx;
		border-radius: 16rpx;
		margin: 48rpx;
		overflow: hidden;
	}

	.titel-felx {
		display: flex;
		align-items: center;
		padding: 28rpx;
		border-radius: 20rpx;
	}

	.titel-h-go {
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	/* 金刚区域 */
	.district-poster {
		width: 220rpx;
		height: 60rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(67, 130, 235, 1) 0%, rgba(6, 189, 254, 1) 100%);
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 0rpx 20rpx;
		box-shadow: #4284ec 0rpx 4rpx 12rpx;
	}

	.district-fenrid {
		width: 220rpx;
		height: 60rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, #F86168, #FFC6D3 100%);
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 0rpx 20rpx;
		box-shadow: #F86168 0rpx 4rpx 12rpx;
	}

	.district-money {
		width: 220rpx;
		height: 60rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(12, 185, 162, 1) 0%, rgba(15, 236, 210, 1) 100%);
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 0rpx 20rpx;
		box-shadow: #0bbda6 0rpx 4rpx 12rpx;
	}

	.district-fabulous {
		width: 180rpx;
		height: 60rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(248, 97, 104, 1) 0%, rgba(255, 198, 211, 1) 100%);
		text-align: center;
		line-height: 64rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin: 0rpx 16rpx;
		box-shadow: #f96a71 0rpx 6rpx 22rpx;
	}

	.district {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 评语 */
	.span-color {
		color: red;
	}

	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		color: #807C7C;
		font-size: 24rpx;
	}

	/* 正文内容 */
	.data-font {
		margin-top: 40rpx;
	}

	.data-h:after {
		content: '';
		position: absolute;
		bottom: -14rpx;
		left: 0px;
		width: 96rpx;
		height: 8rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	.data-h {
		color: #000000;
		font-size: 32rpx;
		position: relative;
	}

	.data-img {
		border-radius: 10rpx;
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 30rpx 0rpx;
	}

	.data-view {
		margin: 20rpx 20rpx;
		font-size: 34rpx;
		color: #333232;
		line-height: 60rpx;
		word-wrap: break-word;
	}

	/* 标题 */
	.tar-w-h {
		color: #000000;
	}

	.titel-h {
		font-size: 42rpx;
		font-weight: bold;
	}

	.titel-view {
		width: 180rpx;
		flex-shrink: 0;
	}

	.titel-h-w {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 70rpx 30rpx 30rpx 30rpx;
		flex-grow: 1;
	}

	.top-img {
		height: 200rpx;
		width: 100%;
	}

	/* 背景图片 */
	.fengrui-img-tar {
		height: 40rpx;
		width: 40rpx;
	}

	.square-black-img {
		height: 40rpx;
		width: 40rpx;
		margin-top: 10rpx;
	}

	.square-black {
		position: fixed;
		left: 28rpx;
		background: rgba(255, 255, 255, 0.5);
		height: 55rpx;
		z-index: 2;
		width: 100rpx;
		border-radius: 100rpx;
		top: 0rpx;
		text-align: center;
	}

	.back-radius {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60rpx;
		width: 100%;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background: #FFFFFF;
		z-index: 2;
	}

	.back-img {
		overflow: hidden;
		position: relative;
		background-color: #3482e2;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		padding-bottom: 20rpx;
		height: 20rpx;
	}

	.fengrui {
		height: 100%;
		width: 100%;
	}

	/* 自定义标题栏 */
	.tar-img {
		margin-left: 28rpx;
		height: 48rpx;
		width: 48rpx;
		overflow: hidden;
	}

	.tar-t {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tar-w {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999999999;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	.fengrui1-img {
		margin-left: 20rpx;

		height: 100%;
		width: 100%;
	}

	.index-ov {
		/* overflow-x: hidden; */
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);

	}

	/* 富文本解析视频宽度 */
	.video {
		width: 100% !important;
	}


	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex,
		.tar-w,
		.back-radius,
		.tar-t,
		.cover-quest {
			background: #161616;
		}

		.data-view,
		.data-h {
			color: #d7d7d7 !important;
		}

		.me-svg,
		.cove-bom,
		.list-view {
			background: #202020;
		}

		.time-font {
			color: rgba(124, 124, 124, 1);
		}

		.tar-w-h,
		.square-black-img,
		.fengrui-img-tar {
			color: rgba(201, 201, 201, 1);
		}

		.privacy-view {
			background-color: #292929;
		}
	}
</style>